<template>
  <div class="commodity">
    <div class="search-container">
      <div style="width: 70px">搜索:</div>
      <el-input
        v-model="inputDepartmentName"
        placeholder="输入部门名称"
        style="width: 240px; margin-right: 7px"
      ></el-input>
      <el-input
        v-model="inputDepartmentCode"
        placeholder="输入部门代码"
        style="width: 240px"
      ></el-input>
      <el-button
        type="primary"
        style="width: 70px; height: 35px; margin-left: 7px"
        @click="onClickSearch"
        >搜索</el-button
      >
      <el-button
        type="primary"
        style="width: 70px; height: 35px; margin-right: 7px"
        @click="onClickClear"
        >重置</el-button
      >
    </div>

    <div class="goods-list">
      <el-table :data="pageTemp" border style="width: 100%">
        <el-table-column
          prop="DepartmentName"
          label="部门名称"
        ></el-table-column>
        <el-table-column
          prop="DepartmentCode"
          label="部门代码"
        ></el-table-column>
        <el-table-column prop="CreateTime" label="修改时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              style="width: 70px; height: 35px; margin-left: 7px"
              type="primary"
              @click="onClickEdit(scope.$index)"
              >编辑</el-button
            >
            <el-button
              style="width: 70px; height: 35px; margin-left: 7px"
              type="danger"
              @click="onClickDelete(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页器-->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev ,pager,next"
        :total="showSearchGoods.length"
        :page-size="5"
        @prev-click="onClickPrev"
        @next-click="onClickNext"
        @current-change="onClickChange"
      >
      </el-pagination>
    </div>

    <!-- 点击修改信息 弹出框-->
    <el-dialog title="修改信息" :visible.sync="showDialogEdit">
      <el-form :model="editGoods" label-width="100px" class="demo-ruleForm">
        <el-form-item label="部门名称" prop="DepartmentName" style="margin-top:5px">
          <el-input v-model="editGoods.DepartmentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门代码" prop="DepartmentCode" style="margin-top:5px">
          <el-input v-model="editGoods.DepartmentCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="修改时间" prop="CreateTime" style="margin-top:5px">
          <el-input v-model="editGoods.CreateTime" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible=false" style="width: 70px; height: 35px;">取 消</el-button>
        <el-button type="primary" @click="onClickEditSure" style="width: 70px; height: 35px;">确 定</el-button>
       </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: JSON.parse(localStorage.getItem("SearchGoods")) || [],
      inputDepartmentName: "",
      inputDepartmentCode: "",
      showSearchGoods: JSON.parse(localStorage.getItem("SearchGoods")) || [],
      page:1,
      pageSize:5,
      startIndex:0,
      endIndex:5,
      showDialogEdit: false,
      editGoods:{},
    };
  },

  mounted() {
    this.$axios.get("http://localhost:8080/goods.json").then((res) => {
      // console.log(res.data.data.goods);
      this.goods = res.data.data.goods;
      // this.showSearchGoods=res.data.data.goods;
      localStorage.setItem("SearchGoods", JSON.stringify(res.data.data.goods));
    });
  },

  methods: {
    //搜索按钮
    onClickSearch() {
      if (
        this.inputDepartmentName.length === 0 &&
        this.inputDepartmentCode.length === 0
      ) {
        this.$message("搜索内容不能为空");
      } else {
        var searchGoods = [];
        searchGoods = this.goods.filter((res) => {
          return (
            res.DepartmentName.includes(this.inputDepartmentName) &&
            res.DepartmentCode.includes(this.inputDepartmentCode)
          );
        });
      }
      this.showSearchGoods = searchGoods;
    },

    //重置按钮
    onClickClear() {
      (this.inputDepartmentName = ""),
        (this.inputDepartmentCode = ""),
        (this.showSearchGoods = this.goods);
    },

    //删除按钮
    onClickDelete(index) {
      this.showSearchGoods.splice(index, 1);
      // localStorage.searchGoods = JSON.stringify(this.showSearchGoods);
    },

    //分页器
    onClickPrev(page){
      this.page=page;
      this.startIndex=(page-1)*this.pageSize;
      this.endIndex=page*this.pageSize;
    },

    onClickNext(page){
      this.page=page;
      this.startIndex=(page-1)*this.pageSize;
      this.endIndex=page*this.pageSize;
      if(this.endIndex>this.showSearchGoods.length){
        this.endIndex=this.showSearchGoods.length
      }
    },

    onClickChange(page){
      this.page=page;
      this.startIndex=(page-1)*this.pageSize;
      this.endIndex=page*this.pageSize;
      if(this.endIndex>this.showSearchGoods.length){
        this.endIndex=this.showSearchGoods.length
      }
    },


    //修改框
    //修改按钮
    onClickEdit(index) {
      this.showDialogEdit = true;
      this.editGoods=this.showSearchGoods[index];
    },
    //确定修改
    onClickEditSure(){
      this.showDialogEdit=false;
      
    }
  },
  
  computed: {
    pageTemp(){
      var pageList=[];
      for(let index=this.startIndex;index<this.endIndex;index++){
        pageList.push(this.showSearchGoods[index]);
      }
      return pageList;
    }
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.commodity {
  width: 100%;
  height: 84vh;
  /* background-color: lightskyblue; */
  margin: 5px;
}
.search-container {
  width: 100%;
  height: 70px;
  /* background-color: lightslategray; */
  display: inline-flex;
  align-content: center;
  align-items: center;
}
.pagination-container {
  /* width:100%; */
  position: relative;
  left: 10px;
  bottom: 0px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  /* background-color: brown; */
}
</style>